import React from "react";
import { Link } from "react-router-dom";
import PageTitle from '../../components/page-title'
import { Button } from 'antd'
import { SnippetsOutlined, DeleteOutlined } from '@ant-design/icons';
import Demo from '../../components/cheackBoxPagination'
import ajax from '../../uil/ajax'
class Ambient extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            select: [],
            header: [
                {
                    title: '环境号',
                    dataIndex: 'env_id_show'
                },
                {
                    title: '基础配置',
                    dataIndex: 'p0',
                    render: (text,index) => <Button> <Link to={`/Ambient-into/${index.env_id}`}>{text}</Link></Button>,
                },
                {
                    title: '工具配置',
                    dataIndex: 'p1',
                    render: text => <Link>{text}</Link>,
                },
                {
                    title: '组播配置',
                    dataIndex: 'p2',
                    render: text => <Link>{text}</Link>,
                }
            ],
            data: [
                {
                    key: '1',
                    env_id: '环境号99',
                    p0: '查看',
                    p1: '查看',
                    p2: '查看'
                },
                {
                    key: '2',
                    env_id: '环境号98',
                    p1: '查看',
                    p2: '查看',
                    p0: '查看'
                },
                {
                    key: '3',
                    env_id: '环境号97',
                    p1: '查看',
                    p2: '查看',
                    p0: '查看'
                },
            ]
        }
    }
    componentDidMount(){
        //console.log('我是生命最初的梦想')
        ajax('/api/param/list').then(res=>{
            console.log(res.data)
            this.setState({
                data:res.data
            })
        })
    }


    deleteWhat(e) {
        console.log(e)
        this.setState({
            select: e
        })
    }

    delete() {
        console.log(this.state.select)
        ajax('/api/Ambient/Delete',this.state.select,'POST').then(res=>{
            console.log(res)
        })
        //数组合并去重
        let arr1 = this.state.data
        let arr2 = this.state.select
        arr1 = arr1.filter(item => {
            let idList = arr2.map(v => v.key)
            return !idList.includes(item.key)

        })

        this.setState({
            data: arr1
        })
        //alert("还有验证和请求没有写,记得记得记得")
    }

    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="环境管理" />

                <Button type="primary" icon={<SnippetsOutlined />}>
                    <Link to='/Ambient-into' style={{ color: '#FFFFFF' }}>新建环境</Link>
                </Button>

                <Button style={{ marginLeft: "10px" }} 
                        type="ghost" danger={true} 
                        onClick={()=>this.delete()}
                        icon={<DeleteOutlined />}>
                    删除
                </Button>

                <Demo columns={this.state.header}
                    dataSource={this.state.data}
                    delete={e => this.deleteWhat(e)}
                />
            </div>
        )
    }
}



export default Ambient